<template>
  <div class="yzSupplyLeaseArea">
    <van-search v-model="keyword" placeholder="请输入区域名称" @search="confirm" />
    <van-index-bar :index-list="indexList" ref="indexBar">
      <template v-for="(item, index) in arrData">
        <van-index-anchor :index="index" :key="index" />
        <template v-for="(kitem, ind) in item">
          <van-cell :title="kitem.name" :key="ind"  @click.stop="tapCell(kitem)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      indexList: ["A", "B", "C"],
      arrData: [],
      keyword: ""
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    tapCell(item){
      let json = {
        area:item.name,
        region_id:item.region_id
      }
      window.localStorage.setItem('yzSupplyArea',JSON.stringify(json));
      this.$router.push(this.fun.getUrl("yzSupplyLease",{},{area:item.name,region_id:item.region_id}));
    },
    confirm() {
      this.getData();
    },
    getData() {
      $http
        .get("plugin.yz-supply-lease.api.goods.regions-list", { keyword: this.keyword }, " ")
        .then(response => {
          if (response.result === 1) {
            this.arrData = response.data;
            let obj = response.data;
            let lis = [];
            for (const key in obj) {
              lis = lis.concat(key);
            }
            console.log(lis);
            this.indexList = lis;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped></style>
